<!--  -->
<template>
  <div>
    <div id="myChart" style="height: 220px;width:100%"></div>
  </div>
</template>

<script>
export default {
  props:['bar'],
  components: {},
  watch:{
    bar(newVal){
      let xBar = Object.keys(this.bar)
      let yBar = Object.values(this.bar)
      // console.log(xBar,yBar)
      this.getEchartData1(xBar,yBar)
    }
  },
  mounted(){
    
    
  },
  methods: {
    getEchartData1(xBar,yBar) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let option = {
            xAxis: {
              type: 'category',
              splitLine: {show: false},
              axisTick:{show: false},
              axisLabel: {
                show: true,
                  textStyle: {
                    color: '#000',  //更改坐标轴文字颜色
                    fontSize : 7      //更改坐标轴文字大小
                  }
              },
              data: xBar
            },
            yAxis: {
              type: 'value',
              axisLine:{show:false},
              axisTick:{show:false},
              axisLabel: {
                show: true,
                  textStyle: {
                    color: '#000',  //更改坐标轴文字颜色
                    fontSize : 8      //更改坐标轴文字大小
                  }
              },
              max : 1000,
              splitNumber : 5,
              textStyle: {
                color: '#c3dbff',  //更改坐标轴文字颜色
                fontSize : 9      //更改坐标轴文字大小
              },
              splitLine: {
                lineStyle: {
                  color: ['#ccc'],//分割线的颜色
                  type:'dashed'
                }
              }
            },
            grid: {
              x: 50,
              y: 25,
              x2: 20,
              y2: 35
            },
            series: [{
              data: yBar,
              showBackground: false,
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#3274f2',//设置柱子颜色
                  barBorderRadius:[10, 10, 0, 0],
                }
              },
              barWidth:5,
            }]
          }
      // 绘制图表
      myChart.setOption(option);
      setTimeout(function (){
        window.onresize = function () {
          myChart.resize();
        }
      },200)
    }
  }
}
</script>
<style scoped>
</style>